// 默认主题变量 ｜ Light 主题变量

:root {
  // Theme color
  --art-primary: #1B84FF;
  --art-success: #17C653;
  --art-warning: #F6C000;
  --art-danger: #F8285A;
  --art-info: #7239EA;

  --art-color: #FFFFFF;
  --art-light: #F9F9F9;
  --art-dark: #1E2129;
  
  // Theme active color
  --art-primary-active: #056EE9;
  --art-success-active: #04B440;
  --art-warning-active: #DEAD00;
  --art-danger-active: #D81A48;
  --art-info-active: #5014D0;

  --art-light-active: #F1F1F4;

  // Background color | Hover color
  --art-text-muted: #99A1B7;
  --art-gray-100: #F9F9F9;
  --art-gray-100-rgb: 249,249,249;
  --art-gray-200: #F1F1F4;
  --art-gray-200-rgb: 241,241,244;
  --art-gray-300: #DBDFE9;
  --art-gray-300-rgb: 219,223,233;
  --art-gray-400: #C4CADA;
  --art-gray-400-rgb: 196,202,218;
  --art-gray-500: #99A1B7;
  --art-gray-500-rgb: 153,161,183;
  --art-gray-600: #78829D;
  --art-gray-600-rgb: 120,130,157;
  --art-gray-700: #4B5675;
  --art-gray-700-rgb: 75,86,117;
  --art-gray-800: #252F4A;
  --art-gray-800-rgb: 37,47,74;
  --art-gray-900: #071437;
  --art-gray-900-rgb: 7,20,55;

  // Text color
  --art-text-muted: #99A1B7;
  --art-text-gray-100: #F9F9F9;
  --art-text-gray-200: #F1F1F4;
  --art-text-gray-300: #DBDFE9;
  --art-text-gray-400: #C4CADA;
  --art-text-gray-500: #99A1B7;
  --art-text-gray-600: #78829D;
  --art-text-gray-700: #4B5675;
  --art-text-gray-800: #252F4A;
  --art-text-gray-900: #071437;

  // Border
  --art-border-color: #F1F1F4;
  --art-border-dashed-color: #DBDFE9;
  --art-root-card-border-color: #F1F1F4;

  // Shadow
  --art-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
  --art-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
  --art-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
  --art-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);

  // Root card box、shadow
  --art-root-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
  --art-root-card-border-color: #F1F1F4;

  // Theme background color
  --art-bg-color: #FCFCFC; // 最底部背景颜色
  --art-main-bg-color: #FFFFFF; 
}

// Dark 主题变量
html.dark {
  // Theme color
  --art-primary: #006AE6;
  --art-success: #00A261;
  --art-warning: #C59A00;
  --art-danger: #E42855;
  --art-info: #883FFF;

  --art-color: #000000;
  --art-light: #1B1C22;
  --art-dark: #272A34;
  
  // Theme active color
  --art-primary-active: #107EFF;
  --art-success-active: #01BF73;
  --art-warning-active: #D9AA00;
  --art-danger-active: #FF3767;
  --art-info-active: #9E63FF;

  --art-light-active: #1F212A;

  // Background color | Hover color
  --art-text-muted: #636674;
  --art-gray-100: #1B1C22;
  --art-gray-100-rgb: 27,28,34;
  --art-gray-200: #26272F;
  --art-gray-200-rgb: 38,39,47;
  --art-gray-300: #363843;
  --art-gray-300-rgb: 54,56,67;
  --art-gray-400: #464852;
  --art-gray-400-rgb: 70,72,82;
  --art-gray-500: #636674;
  --art-gray-500-rgb: 99,102,116;
  --art-gray-600: #808290;
  --art-gray-600-rgb: 128,130,144;
  --art-gray-700: #9A9CAE;
  --art-gray-700-rgb: 154,156,174;
  --art-gray-800: #B5B7C8;
  --art-gray-800-rgb: 181,183,200;
  --art-gray-900: #F5F5F5;
  --art-gray-900-rgb: 245,245,245;
  

  // Text color
  --art-text-muted: #636674;
  --art-text-gray-100: #1B1C22;
  --art-text-gray-200: #26272F;
  --art-text-gray-300: #363843;
  --art-text-gray-400: #464852;
  --art-text-gray-500: #636674;
  --art-text-gray-600: #808290;
  --art-text-gray-700: #9A9CAE;
  --art-text-gray-800: #B5B7C8;
  --art-text-gray-900: #F5F5F5;

  // Border
  --art-border-color: #26272F;
  --art-border-dashed-color: #363843;
  --art-root-card-border-color: #1E2027;

  // Shadow
  --art-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
  --art-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
  --art-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
  --art-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);

  // Root card box、shadow
  --art-root-card-box-shadow: none;
  --art-root-card-border-color: #1E2027;

  // Theme background color
  --art-bg-color: #070707;
  --art-main-bg-color: #161618;
}

// CSS 全局变量
:root {
  // 页面级别变量
  --console-margin: 20px; // 工作台盒子间距
}

// 媒体查询-设备尺寸
// notebook
$device-notebook: 1600px;
// ipad pro
$device-ipad-pro: 1180px;
// ipad
$device-ipad: 800px;
// ipad-竖屏
$device-ipad-vertical: 900px;
// mobile
$device-phone: 500px;

// console view
$console-box-gap: 25px;